<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        table {
            border-collapse: collapse;
            border: 1px solid #c0c0c0;
            width: 500px;
            margin: 100px auto;
            text-align: center;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
            height: 24px;
        }

        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <th>
                <input type="checkbox" id="checkAll" />全选/全不选
            </th>
            <th>菜名</th>
            <th>商家</th>
            <th>价格</th>
        </tr>
        <tr>
            <td>
                <input type="checkbox" class="check" />
            </td>
            <td>红烧肉</td>
            <td>隆江猪脚饭</td>
            <td>￥200</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" class="check" />
            </td>
            <td>香酥排骨</td>
            <td>隆江猪脚饭</td>
            <td>￥998</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" class="check" />
            </td>
            <td>北京烤鸭</td>
            <td>隆江猪脚饭</td>
            <td>￥88</td>
        </tr>
    </table>

    <script>
        // 需求：点击 全选/全不选  下面的checkbox保持一致状态

        /*
            思路分析
            1. 事件源：checkbox#checkAll
            2. 事件类型：点击  onclick
            3. 事件处理
            3.1 获取所有的下面的小开关：checkbox.check
            3.2 让每个.check 与当前 #checkAll的状态一样（需要遍历）：checked控制被选中状态
        */

        // 1. 事件源：checkbox#checkAll
        let checkAll = document.querySelector('#checkAll');
        // console.log(checkAll);
        // 2. 事件类型：点击  onclick
        checkAll.onclick = function () {
            // 3. 事件处理
            // 3.1 获取所有的下面的小开关：checkbox.check
            let checks = document.querySelectorAll('.check');
            // console.log(checks);
            // 3.2 让每个.check 与当前 #checkAll的状态一样（需要遍历）：checked控制被选中状态
            checks.forEach(function (c) {
                c.checked = checkAll.checked;
            });
        };

        // 需求：点击小开关，所有小开关的合并状态，决定大开关的状态

        /*
            思路分析
            1. 给每个小开关点击事件
            1.1 获取事件源：获取所有的.check
            1.2 绑定事件：遍历，点击 onclick
            1.3 事件处理：三个小开关的整体状态代表大开关
            2. 事件处理
            2.1 开关思想：设定一个变量：假设三个小开关都是选中的 let flag = true;
            2.2 验证假设：遍历所有的小开关，查看小开关的状态
            2.2.1 被选中：假设成功（不用管）
            2.2.2 没有被选中：假设失败（修改开关的值为false：flag = false）
            2.3 修改大开关的状态为：flag
        */

        // 1. 给每个小开关点击事件
        // 1.1 获取事件源：获取所有的.check
        let checks = document.querySelectorAll('.check');
        // 1.2 绑定事件：遍历，点击 onclick
        // 1.3 事件处理：三个小开关的整体状态代表大开关
        checks.forEach(function (c) {
            c.onclick = function () {
                // 2. 事件处理
                // 2.1 开关思想：设定一个变量：假设三个小开关都是选中的 let flag = true;
                let flag = true;

                // 2.2 验证假设：遍历所有的小开关，查看小开关的状态
                checks.forEach(function (cc) {

                    // 2.2.1 被选中：假设成功（不用管）
                    // 2.2.2 没有被选中：假设失败（修改开关的值为false：flag = false）
                    if (cc.checked === false) {
                        // 没有被选中：假设失败
                        flag = false;
                    }
                });

                // 2.3 修改大开关的状态为：flag
                checkAll.checked = flag;
            };
        });


    </script>
</body>

</html>